<template>
  <div class="content">
    <div class="data_content">
      <div class="data_list">
        <span class="data_left"><i class="iconfont icon password_icon"></i><input type="password" v-model="form.userPwOld" placeholder="请输入您的当前密码" class="pl40"></span>
        <span class="data_right"><i class="iconfont icon del_icon pl5"></i></span>
        <div class="hr_bottom" style="width: calc(100% - 15px);"></div>
      </div>
      <div class="data_list">
        <span class="data_left"><i class="iconfont icon password_icon"></i><input type="password" v-model="form.userPw" placeholder="请输入您的新密码" class="pl40"></span>
        <span class="data_right"><i class="iconfont icon del_icon pl5"></i></span>
        <div class="hr_bottom" style="width: calc(100% - 15px);"></div>
      </div>
      <div class="data_list">
        <span class="data_left"><i class="iconfont icon password_icon"></i><input type="password" v-model="form.userPw2" placeholder="请再次输入您的新密码" class="pl40"></span>
        <span class="data_right"><i class="iconfont icon del_icon pl5"></i></span>
      </div>
    </div>
    <div class="btn_content">
      <button class="button_confirm btn_green f18 mt35" @click="clickMe">确认修改</button>
    </div>
  </div>
</template>

<script>
  import {changePw} from '@/api/userLogin'
  import {init} from '@/views/utils/common'

  export default {
    data() {
      return {
        form: {
          userId: '',
          userPw: '',
          userPw2: '',
          userPwOld: ''
        },
      }
    },
    mounted() {
      let that = this
      this.form.userId = localStorage.getItem("token")
    },
    methods: {

      clickMe() {

        if (!this.form.userId) {
          this.$message({
            message: '用户信息不能为空~',
            type: 'warning'
          });
          return
        }

        if (!this.form.userPwOld || !this.form.userPw2 || !this.form.userPw) {
          this.$message({
            message: '密码不能为空~',
            type: 'warning'
          });
          return
        }

        if (this.form.userPwOld === this.form.userPw) {
          this.$message({
            message: '密码不能和旧密码相同~',
            type: 'warning'
          });
          return
        }

        if (this.form.userPw2 !== this.form.userPw) {
          this.$message({
            message: '两次输入的密码不一致~',
            type: 'warning'
          });
          return
        }

        changePw(this.form).then(() => {
          this.$message({
            title: '成功',
            message: '修改密码成功',
            type: 'success',
            duration: 1000,
            onClose() {
              location.reload()
            }
          })
        })

      },
    }
  }
</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/reset.css";
</style>
